<template>
  <div class="vm-common-container">
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-Details-container" ref="businessTransaction">
      <!-- 其他 -->
      <div class="content" style="height: 100%;" v-if="pageTitle != '匹配采购详情'">
        <div class="vm-header-prompt">
          <h6>请去网站参与招标报价</h6>
        </div>
        <ul class="vm-notice-warp">
          <li>
            <h6>招标编号</h6>
            <p>{{ requireDetails.cProductCode }}</p>
          </li>
          <li>
            <h6>公告主题</h6>
            <p>{{ requireDetails.cIBidsTatle }}</p>
          </li>
          <li>
            <h6>责任人</h6>
            <p>{{ requireDetails.cRealName }}</p>
          </li>
          <li>
            <h6>公告期</h6>
            <p>{{ requireDetails.iAnnDay }}天</p>
          </li>
          <li>
            <h6>开标时间</h6>
            <p>{{ requireDetails.dOpenTime }}</p>
          </li>
          <li>
            <h6>采购方式</h6>
            <p v-if="requireDetails.cPOType == 1">询比价</p>
            <p v-else-if="requireDetails.cPOType == 2">竞争性谈判</p>
            <p v-else-if="requireDetails.cPOType == 3">单一来源</p>
            <p v-else-if="requireDetails.cPOType == 4">框架协议</p>
            <p v-else-if="requireDetails.cPOType == 5">竞价采购</p>
            <p v-else-if="requireDetails.cPOType == 6">应急采购</p>
            <p v-else-if="requireDetails.cPOType == 0">招投标</p>
          </li>
          <li class="vm-material" v-for="(item, key) in requireDetails.matrial" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>规格</span>
                    <em>{{ item.cInvStd }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.iNumber }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="vm-details-footer">
          <router-link to="/common/offer_list">
            <mt-button type="primary" >查看报价</mt-button>
          </router-link>
        </div>
      </div>
      <!-- 匹配采购详情页面 -->
      <div class="content" style="height: 100%;" v-else>
        <ul class="vm-notice-warp">
          <li>
            <h6>采购主题</h6>
            <p>{{ objDetails.name }}</p>
          </li>
          <li>
            <h6>制单人</h6>
            <p>{{ objDetails.cRealName }}</p>
          </li>
          <li>
            <h6>发布日期</h6>
            <p>{{ objDetails.addtime }}</p>
          </li>
          <li>
            <h6>截止日期</h6>
            <p>{{ objDetails.endtime }}</p>
          </li>
          <li>
            <h6>发票要求</h6>
            <p>{{ objDetails.Requirement }}</p>
          </li>
          <li>
            <h6>收货地址</h6>
            <p>{{objDetails.cAddress}}</p>
          </li>
          <li style="flex-direction: column;text-align: left;align-items: flex-start;">
            <h6>邀请报价公司</h6>
            <p v-for="(item, key) in objDetails.veninfo">{{ item.cCompanyName }}</p>
          </li>
          <li class="vm-material" v-for="(item, key) in objDetails.wl_data" :key="key">
            <h6>采购物资</h6>
            <div class="vm-material-warp">
              <h5>{{ item.cInventoryName }}</h5>
              <div class="vm-item-material">
                <div class="vm-item-l">
                  <img src="../../../static/images/box.png" alt="">
                </div>
                <div class="vm-item-r">
                  <p>
                    <span>物料名称：</span>
                    <em>{{ item.cInventoryName }}</em>
                  </p>
                  <p>
                    <span>物料编码：</span>
                    <em>{{ item.cInventoryCode }}</em>
                  </p>
                  <p>
                    <span>数量</span>
                    <em>{{ item.cNumber }}</em>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h6>采购要求</h6>
            <p>{{ objDetails.Requirement }}</p>
          </li>
        </ul>
        <div class="vm-details-footer">
          <router-link :to="`/common/offer_list/?rid=${rid}`">
            <mt-button type="primary" >查看报价</mt-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vmCommonHeader from '@/components/vm-common-header.vue'
  import { Transaction_reviewlist } from '@/api/vm-common-details.js'
  export default {
    data () {
      return {
        pageTitle: this.$route.query.title || this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        rid: this.$route.params.id, // 匹配采购查看详情
        objDetails: new Object()
      }
    },
    components: {
      'vm-common-header': vmCommonHeader
    },
    created () {
      this.getdetailData();
    },
    methods: {
      getdetailData () {
        let rid = this.rid;
        Transaction_reviewlist(rid)
          .then(data => {
            this.objDetails = data.data.data[0];
            console.log(this.objDetails );
          })
      }
    },
    mounted () {}
  }
</script>

<style scoped lang="scss">
  .vm-Details-container {
    background-color: #ffffff;
    height: calc(100% - 120px);
    overflow: scroll;
    .vm-header-prompt {
      background-color: #ffbd1a;
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      h6 {
        font-size: 26px;
        color: #7a4811;
      }
    }
    .vm-notice-warp {
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      background-color: #fff;
      li {
        margin-left: 40px;
        display: flex;
        padding: 20px 0;
        align-items: center;
        border-bottom: 1px solid #eeeeee; /* no */
        text-align: left;
        h6 {
          width: 185px;
          color: #989898;
          font-size: 26px;
        }
        p {
          font-size: 26px;
          flex: 1;
        }
        &.vm-material {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          border-bottom: 1px solid #eeeeee; /* no */
          h6 {
            margin-top: 30px;
          }
          .vm-material-warp {
            margin-bottom: 30px;
            width: 100%;
            h5 {
              height: 100px;
              font-size: 28px;
              color: #000000;
              font-weight: bold;
              align-items: center;
              display: flex;
            }
            .vm-item-material {
              display: flex;
              .vm-item-l {
                margin-right: 30px;
                img {
                  max-width: 120px;
                  max-height: 120px;
                }
              }
              .vm-item-r {
                padding: 8px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }
            }
          }
        }
      }
    }
  }
  .vm-details-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 10px;
    background: #ffffff;
    height: 120px;
    button {
      width: 100%;
      height: 90px;
      border-radius: 10px; /* no */
      background-color: #f34c4f;
      font-size: 35px;
    }
  }
</style>
